{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
  <div class="card shadow-sm p-4">
    <h3 class="mb-3">Edit Expense</h3>
    <form method="POST">
      {% csrf_token %}
      <div class="mb-3">
        <label for="title" class="form-label">Title</label>
        <input type="text" name="title" id="title" class="form-control" value="{{ expense.title }}" required>
      </div>

      <div class="mb-3">
        <label for="category" class="form-label">Category</label>
        <select name="category" id="category" class="form-select" required>
          {% for cat in categories %}
            <option value="{{ cat.id }}" {% if cat.id == expense.category.id %}selected{% endif %}>
              {{ cat.name }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="mb-3">
        <label for="amount" class="form-label">Amount</label>
        <input type="number" step="0.01" name="amount" id="amount" class="form-control" value="{{ expense.amount }}" required>
      </div>

      <div class="mb-3">
        <label for="date" class="form-label">Date</label>
        <input type="date" name="date" id="date" class="form-control" value="{{ expense.date|date:'Y-m-d' }}" required>
      </div>

      <div class="mb-3">
        <label for="description" class="form-label">Description</label>
        <textarea name="description" id="description" class="form-control" rows="3">{{ expense.description }}</textarea>
      </div>

      <button type="submit" class="btn btn-success">Update</button>
      <a href="{% url 'dashboard' %}" class="btn btn-secondary">Cancel</a>
    </form>
  </div>
</div>
{% endblock %}